import React, { Component } from "react";
import { apiGetOrderDetails } from "@/request/doctor";
import GoBack from "@/components/TheGoBack";
import { Skeleton, Descriptions, Badge } from "antd";
import "../style/style.less";
import TheImage from "@/components/TheImage";
import userAvatar from '@/assets/images/zhanwei_head.svg'
import petCard from '@/assets/images/petCard.png'
import _ from 'lodash'

class ChargebackDetails extends Component {
  state = {
    dataSource: null,
    productType:true,
    columns: [
      {
        title: "商品信息",
        render: (text, record) => {
          return (
            <div style={{ display: "flex", alignItems: "center" }}>
              <TheImage
                src={record.productImage}
                width={100}
              />
              <span style={{ margin: "0 10px" }}>{record.productName}</span>
              <span>{record.sku}</span>
            </div>
          );
        },
      },

      {
        title: "商品单价",
        dataIndex: "orderPrice",
        key: "orderPrice",
        render: (text) => <React.$price price={text || 0} />,
      },
      {
        title: "商品数量",
        dataIndex: "orderProductCount",
        key: "orderProductCount",
        render: (text) => text || 0,
      },
      {
        title: "总计",
        dataIndex: "orderPriceTotal",
        key: "orderPriceTotal",
        render: (text) => <React.$price price={text || 0} />,
      },
    ],
  };

  async componentDidMount() {
    await this.getDetails();
  }

  getDetails = async () => {
    const orderId = this.props.match.params.id;
    console.log(orderId)
    const response = await apiGetOrderDetails({"id":orderId});
    if (response.code === 0) {
      const dataSource = response.data;
      let payWay = ''
      switch (dataSource.payWay) {
        case 'WeChat':
          payWay = '微信'
          break;
        case 'Alipay':
          payWay = '支付宝'
          break;
        case 'UnionPay':
          payWay = "银联"
          break;
        case 'YsPay':
          payWay = "银行卡支付"
          break;
          case 'RemoteAlipay':
            payWay = "扫码支付（支付宝）"
            break;
        case 'RemoteWeChat':
            payWay = "扫码支付（微信）"
            break;
        default:
          payWay = "未知支付方式"
      }
      let orderState = ''
      switch (_.toString(dataSource.orderState)) {
        case '1':
          orderState = <Badge status="default" text="未开始" />
          break
        case '2':
          orderState = <Badge status="processing" text="进行中" />
          break
        case '3':
          orderState = <Badge status="processing" text="待付款" />
          break
        case '9':
          orderState = <Badge status="success" text="交易成功" />
          break
        case '0':
          orderState = <Badge status="error" text="交易关闭" />
          break
        default:
          orderState = <Badge status="warning" text="未知订单状态" />
      }
      // 订单概况
      const detailsData = [
        {
          title: "订单编号",
          value: dataSource.orderCode,
        },
        {
          title: "预约时间",
          value: dataSource.appointmentTime,
        },
        {
          title: "下单时间",
          value: dataSource.createTime,
        },
        {
          title: "支付方式",
          value: payWay,
        },
        {
          title: "订单状态",
          value: orderState,
        },
        {
          title: "挂号费",
          value: <React.$price price={dataSource.doctorPrice || 0} />,
        },
        {
          title: "订单金额",
          value: <React.$price price={dataSource.orderPrice || 0} />,
        },
        {
          title: "实付金额",
          value: <React.$price price={dataSource.payPrice || 0} />,
        },

        {
          title: "会员ID",
          value: dataSource.memberId,
        },
        {
          title: "会员昵称",
          value: dataSource.nickName,
        },
        {
          title: "会员手机号",
          value: dataSource.memberMobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
        },
        {
          title: "会员头像",
          value: <TheImage src={dataSource.memberAvatar?dataSource.memberAvatar:userAvatar} width={100}/>,
        },
      ];
      let salesReturnStatus = ''
      switch (_.toString(dataSource.salesReturnStatus)) {
        case '1':
          salesReturnStatus = <Badge status="processing" text="退款中" />
          break;
        case '9':
          salesReturnStatus = <Badge status="success" text="退款成功" />
          break;
        case '4':
          salesReturnStatus = <Badge status="error" text="退款失败" />
          break;
        case '0':
          salesReturnStatus = <Badge status="error" text="退款关闭" />
          break;
        default:
          salesReturnStatus = <Badge status="warning" text="未知退款状态" />
      }
      // 售后信息
      const chargebackData = [
        {
          title: '退单编号',
          value: dataSource.hospitalSalesReturnCode
        },

        {
          title: '退单状态',
          value: salesReturnStatus
        },
        {
          title: '退单时间',
          value: dataSource.refundTime
        },
        {
          title: '退单金额',
          value: <React.$price price={dataSource.refundPrice || 0} />,
        },
        {
          title: '退单原因',
          value: dataSource.refundCause
        },
      ]
      const doctorData = [
        {
          title: "门店名",
          value: dataSource.storeName,
        },
        {
          title: "详细地址",
          value: dataSource.addressDetail,
        },
        {
          title: "医生头像",
          value: <TheImage src={dataSource.doctorHeadPortrait} width={100}/>,
        },
        {
          title: "医生电话",
          value: dataSource.doctorMobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
        },
        {
          title: "医生名称",
          value: dataSource.doctorName,
        },
      ]
      const petData = [
        {
          title: "宠物名称",
          value: dataSource.petName,
        },
        {
          title: "宠物生日",
          value: dataSource.birthday,
        },
        {
          title: "宠物身份证号",
          value: dataSource.petIdCard,
        },
        {
          title: "宠物品种",
          value: dataSource.petVarieties,
        },
        // {
        //   title: "宠物主人姓名",
        //   value: dataSource.petUserName,
        // },
        // {
        //   title: "宠物主人电话",
        //   value: dataSource.petUserMobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
        // },

        {
          title: "宠物身份证照片",
          value: <TheImage src={dataSource.petCardShowImages?dataSource.petCardShowImages:petCard} width={100}/>,
        },
      ]
      this.setState({
        dataSource,
        detailsData,
        productData:[],
        receiving:[],
        chargebackData,
        doctorData,
        petData,
      });
    }
  };
  getOrderState = (value) => {
    let label = null;
    switch (_.toString(value)) {
      case "3":
        label = <span style={{ color: "#d9001b" }}>待付款</span>;
        break;
      case "4":
        label = <span style={{ color: "#f59a23" }}>待发货</span>;
        break;
      case "5":
        label = <span style={{ color: "#70b603" }}>待收货</span>;
        break;
      case "9":
        label = <span style={{ color: "#70b685" }}>交易成功</span>;
        break;
      case "0":
        label = <span style={{ color: "#c280ff" }}>交易关闭</span>;
        break;
      default:
        break;
    }
    return label;
  };
  getOrderStatus = (value) => {
    let num = 0;
    switch (value) {
      case "3":
        num = 0;
        break;
      case "4":
        num = 1;
        break;
      case "5":
        num = 2;
        break;
      case "9":
        num = 4;
        break;
      default:
        break;
    }
    return num;
  };

  render() {
    const { dataSource, detailsData, doctorData, petData, chargebackData,loading } =
      this.state;
    return (
      <>
        <div className={"p-layout-box order-details-box"}>
          <GoBack history={this.props.history} title={"订单详情"} />
          {dataSource && (
            <div className={"p-layout-content"}>
              <div className={"order-details-content"}>
                <div className={"order-details-title"}>售后信息</div>
                <Descriptions title="" bordered size={"middle "}>
                  {chargebackData.map((v, i) => {
                    return (
                        <Descriptions.Item key={i} label={v.title}>{v.value}</Descriptions.Item>
                    );
                  })}
                </Descriptions>
                {/*<ul className={"order-details-information"}>*/}
                {/*  {chargebackData.map((v, i) => {*/}
                {/*    return (*/}
                {/*      <li key={i} className={"order-details-information-item"}>*/}
                {/*        <span className={"item-title"}>{v.title}</span>*/}
                {/*        <span className={"item-separated"}>:</span>*/}
                {/*        <span className={"item-value"}>{v.value}</span>*/}
                {/*      </li>*/}
                {/*    );*/}
                {/*  })}*/}
                {/*</ul>*/}
              </div>
              <div className={"order-details-content"}>
                <div className={"order-details-title"}>订单概况</div>
                <Descriptions title="" bordered size={"middle "}>
                  {detailsData.map((v, i) => {
                    return (
                        <Descriptions.Item key={i} label={v.title}>{v.value}</Descriptions.Item>
                    );
                  })}
                </Descriptions>
                {/*<ul className={"order-details-information"}>*/}
                {/*  {detailsData.map((v, i) => {*/}
                {/*    return (*/}
                {/*      <li key={i} className={"order-details-information-item"}>*/}
                {/*        <span className={"item-title"}>{v.title}</span>*/}
                {/*        <span className={"item-separated"}>:</span>*/}
                {/*        <span className={"item-value"}>{v.value}</span>*/}
                {/*      </li>*/}
                {/*    );*/}
                {/*  })}*/}
                {/*</ul>*/}
              </div>
              <div className={"order-details-content"}>
                <div className={"order-details-title"}>医生信息</div>
                <Descriptions title="" bordered size={"middle "}>
                  {doctorData.map((v, i) => {
                    return (
                        <Descriptions.Item key={i} label={v.title}>{v.value}</Descriptions.Item>
                    );
                  })}
                </Descriptions>
                {/*<ul className={"order-details-information"}>*/}
                {/*  {doctorData.map((v, i) => {*/}
                {/*    return (*/}
                {/*        <li key={i} className={"order-details-information-item"}>*/}
                {/*          <span className={"item-title"}>{v.title}</span>*/}
                {/*          <span className={"item-separated"}>:</span>*/}
                {/*          <span className={"item-value"}>{v.value}</span>*/}
                {/*        </li>*/}
                {/*    );*/}
                {/*  })}*/}
                {/*</ul>*/}
              </div>
              <div className={"order-details-content"}>
                <div className={"order-details-title"}>宠物信息</div>
                <Descriptions title="" bordered size={"middle "}>
                  {petData.map((v, i) => {
                    return (
                        <Descriptions.Item key={i} label={v.title}>{v.value}</Descriptions.Item>
                    );
                  })}
                </Descriptions>
                {/*<ul className={"order-details-information"}>*/}
                {/*  {petData.map((v, i) => {*/}
                {/*    return (*/}
                {/*        <li key={i} className={"order-details-information-item"}>*/}
                {/*          <span className={"item-title"}>{v.title}</span>*/}
                {/*          <span className={"item-separated"}>:</span>*/}
                {/*          <span className={"item-value"}>{v.value}</span>*/}
                {/*        </li>*/}
                {/*    );*/}
                {/*  })}*/}
                {/*</ul>*/}
              </div>
            </div>
          )}
        </div>
      </>
    );
  }
}

export default ChargebackDetails;
